<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹窗页面</title>
    <link href="../styles/popup.css" rel="stylesheet">
</head>
<body>
    <div class="pic-select">
        <label for="pic">初始图片</label>
        <input accept="image/*" id="pic" type="file">
    </div>

    <div>
        <input id="follow" type="checkbox">
        <label for="follow">跟随模式</label>
        <span class="tips" title="开启后图片跟随鼠标移动
        且下列设置生效">?</span>
    </div>

    <div>
        <input checked id="animation-mode" name="mode" type="radio">
        <label for="animation-mode">动画模式</label>
        <input id="switch-mode" name="mode" type="radio">
        <label for="switch-mode">轮换模式</label>
    </div>

    <div class="pic-select pic-am">
        <label for="pic-am--click">点击动画</label>
        <input accept="image/*" id="pic-am--click" type="file">
        <span style="margin-left: 15px">
            <label for="pic-am-hold">滚动动画</label>
            <input accept="image/*" id="pic-am-hold" type="file">
        </span>
    </div>
    <div class="pic-am">
        <div id="pic-am-time">
            动画时长
            <button>-</button>
            <span>1.0s</span>
            <button>+</button>
        </div>
    </div>

    <div class="pic-select pic-sm hide">
        <label for="pic-sm-0">备选图一</label>
        <input accept="image/*" id="pic-sm-0" type="file">
        <span style="margin-left: 15px">
            <label for="pic-sm-1">备选图二</label>
            <input accept="image/*" id="pic-sm-1" type="file">
        </span>
    </div>

    <div class="pic-select pic-sm hide">
        <label for="pic-sm-2">备选图三</label>
        <input accept="image/*" id="pic-sm-2" type="file">
        <span style="margin-left: 15px">
            <label for="pic-sm-3">备选图四</label>
            <input accept="image/*" id="pic-sm-3" type="file">
        </span>
    </div>

    <script src="../scripts/popup.js"></script>
</body>
</html>